<template>
    <div class="itembox" @click="itemClick">
        <slot name="itemimg"></slot>
        <slot name="itemfont"></slot>
    </div>
</template>

<script>
    export default {
        name: "tab-bar-item",
        data(){
            return {

            }
        },
        methods:{
            itemClick(){
                this.$router.push(this.url);
            }
        },
        props:{
            url:String
        }
    }
</script>

<style scoped>
.itembox{
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.itembox img{
    width:24px;
    height: 20px;
    vertical-align: middle;
    margin-top: 5px;
}
.itemfont{
font-size: 14px;
    text-align: center;
}
</style>